<template>
  <div class="jobDetails">
    <van-nav-bar fixed placeholder :title="title" left-text="返回" right-text="分享" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />

    <detailsTopImg v-if="jobDetails.recruitFileList" :fileList="jobDetails.recruitFileList" />
    <jobDetailsTitle :jobDetails="jobDetails" />
    <jobDetailsTable v-if="jobDetails.id" :jobDetails="jobDetails" />
    <jobDetailsOther v-if="jobDetails.id" :jobDetails="jobDetails" />

    <!-- 门店评价 -->
    <div class="jobDetails_evaluateList">
      <div class="jobDetails_evaluateList_title" @click="toEvaluateListPage()">
        <div class="jobDetails_evaluateList_title_text">工友评价</div>
        <div class="jobDetails_evaluateList_title_right">
          <span>{{ listNumber ? '查看更多（' + listNumber + '条）' : '' }}</span>
          <i class="iconfont icon-gengduo jobDetails_evaluateList_title_right_cion"></i>
        </div>
      </div>
      <evaluateList v-if="jobDetails.id" :type="2" :maxNum="3" :attributeId="jobDetails.id" @setListNumber="setListNumber" />
    </div>

    <van-divider>到底了</van-divider>

    <!-- 底部按钮 -->
    <div class="jobDetails_bottom">
      <div class="jobDetails_bottom_box">
        <van-button icon="comment" @click="toQuestionsPage">问答</van-button>
        <van-button icon="service" @click="toApplication">报名咨询</van-button>
        <van-button icon="share" @click="toRecommend">推荐好友</van-button>
      </div>
    </div>

    <!-- 分享弹窗引导 -->
    <van-popup v-model:show="showShare">
      <div class="shareBox">
        <i class="iconfont icon-yindao-jiantou"></i>
        <div class="shareBox_text">点击右上角分享给好友或分享到朋友圈</div>
        <div class="shareBox_close" @click="showShare = false">我知道了</div>
      </div>
    </van-popup>

  </div>
</template>

<script setup>
import { getWechatSignAPI } from '@/api/common';
import { applyJobAPI, getJobDetailAPI } from '@/api/job';
import detailsTopImg from '@/components/detailsTopImg.vue';
import evaluateList from '@/components/evaluateList.vue';
import { getUserId } from '@/utils/auth';
import { showConfirmDialog, showNotify } from 'vant';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import wx from 'weixin-js-sdk';
import jobDetailsOther from './jobDetails/jobDetailsOther.vue';
import jobDetailsTable from './jobDetails/jobDetailsTable.vue';
import jobDetailsTitle from './jobDetails/jobDetailsTitle.vue';
// console.log('wx', wx)
const router = useRouter()
const title = ref('职位详情')
const jobDetails = ref({})
const listNumber = ref(0)
const showShare = ref(false)
const imgUrl = 'https://shuahuo-oss.oss-cn-beijing.aliyuncs.com/hualao_recruit/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20231111134032.png'

// 返回上一页
const onClickLeft = () => {
  // router.back()
  if(window.history.length > 1){
    router.back()
  }else{
    router.push({
      path: '/'
    })
  }
}

// 获取微信签名
const getWxSign = async () => {
  let url = window.location.href.split('#')[0]

  console.log('url', url)
  await getWechatSignAPI({ url }).then(res => {
    console.log('微信签名', res.data)
    wx.config({
      debug: false,
      appId: res.data.appid,
      timestamp: res.data.timestamp,
      nonceStr: res.data.noncestr,
      signature: res.data.signature,
      url: res.data.url,
      jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
    })

    wx.ready(function () {

      // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
      wx.updateAppMessageShareData({
        title: jobDetails.value.careasText, // 分享标题
        desc: jobDetails.value.oneAndSecondArea, // 分享描述
        link: 'https://recruit.hualaogroup.cn/jobDetails?id=' + jobDetails.value.id + '&dynamicKeepAlive=0', // 分享链接
        imgUrl: jobDetails.value.byCompany.avatar ? jobDetails.value.byCompany.avatar : imgUrl // 分享图标
      })

      // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
      wx.updateTimelineShareData({
        title: jobDetails.value.careasText, // 分享标题
        link: 'https://recruit.hualaogroup.cn/jobDetails?id=' + jobDetails.id + '&dynamicKeepAlive=0', // 分享链接
        imgUrl: jobDetails.value.byCompany.avatar ? jobDetails.value.byCompany.avatar : imgUrl // 分享图标
      })
    })
  })
}


// 分享
const onClickRight = () => {
  showShare.value = true
}

// 设置评价数量
const setListNumber = (val) => {
  listNumber.value = val
}

// 跳转到评价列表页
const toEvaluateListPage = () => {
  router.push({
    path: '/evaluateListPage',
    query: {
      type: 2,
      attributeId: jobDetails.value.id,
      dynamicKeepAlive: 0
    }
  })
}

// 跳转到问答页
const toQuestionsPage = () => {
  router.push({
    path: '/questionsPage',
    query: {
      type: 2,
      attributeId: jobDetails.value.id,
      title: title.value,
      dynamicKeepAlive: 0
    }
  })
}

// 跳转到推荐页
const toRecommend = () => {
  router.push({
    path: '/recommend',
    query: {
      attributeId: jobDetails.value.id,
      dynamicKeepAlive: 0
    }
  })
}


// 立即报名
const toApplication = () => {
  let userId = getUserId()
  if (userId === 'null') {
    console.log('验证有没有身份证号', userId)
    showConfirmDialog({
      title: '提示',
      message:
        '您还未填写身份证号，请填写后再报名',
    }).then(() => {
      router.push({
        path: '/userInformation',
        query: {
          dynamicKeepAlive: 0
        }
      })
    }).catch(() => {
      // on cancel
    })
  } else {
    showConfirmDialog({
      // title: '立即报名',
      message:
        '我要报名当前职位',
    }).then(() => {
      confirmApplication()
    }).catch(() => {
      // on cancel
    })
  }
}

// 确认报名
const confirmApplication = async () => {
  let data = {
    recruitId: router.currentRoute.value.query.id
  }
  await applyJobAPI(data).then(res => {
    console.log(res)
    showNotify({ type: 'success', message: '报名成功' })
  }).catch(err => {
    console.log(err)
  }).finally(() => {
  })
}

// 获取职位详情
const getJobDetail = async () => {
  let id = router.currentRoute.value.query.id
  await getJobDetailAPI(id).then(res => {
    console.log('职位详情', res.data)
    jobDetails.value = res.data
    title.value = res.data.byCompany.trueName
    getWxSign()
  })
}
getJobDetail()

</script>

<style lang="scss" scoped>
:deep(.van-nav-bar__right) {
  .van-nav-bar__text {
    color: #333
  }
}

.jobDetails {
  :deep(.van-sticky) {
    height: auto !important;
  }

  &_evaluateList {
    padding: .5333rem 0 0;

    &_title {
      padding: 0 .2667rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: .5333rem;
      border-bottom: 1px solid #f3f3f3;

      &_text {
        font-size: .3733rem;
        font-weight: bold;
        color: #333;
      }

      &_right {
        display: flex;
        align-items: center;

        span {
          font-size: .32rem;
          color: #999;
        }

        &_cion {
          font-size: .32rem;
          color: #999;
        }
      }
    }
  }

  &_bottom {
    width: 100%;
    position: fixed;
    bottom: 0;

    &_box {
      width: calc(100% - .5333rem);
      display: flex;
      justify-content: space-between;
      padding: .2667rem;
      background-color: #fff;
      box-shadow: 0 0 5px #ccc;

      :deep(.van-button) {
        flex: 1;
        border: none;

        &:nth-child(2) {
          margin: 0 .2667rem;
          background-color: $color-primary;
          color: #fff;
        }

        &:nth-child(3) {
          background-color: #ff5050;
          color: #fff;
        }
      }
    }
  }

  :deep(.van-overlay) {
    background: rgba($color: #000000, $alpha: .9);
  }

  :deep(.van-popup--center) {
    width: 100%;
    max-width: 100%;
    margin: 0;

  }

  :deep(.van-popup) {
    background: none;
  }

  .shareBox {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    i {
      font-size: 1.6rem;
      color: #fff;
      margin-right: .2667rem;
      margin-top: .2667rem;
    }

    &_text {
      margin-top: .5333rem;
      align-self: center;
      font-size: .3733rem;
      background-color: #fff;
      padding: .8rem .5333rem;
      border-radius: .16rem;
    }

    &_close {
      margin-top: auto;
      margin-bottom: .8rem;
      align-self: center;
      font-size: .3733rem;
      color: #fff;
      border: 1px solid #fff;
      padding: .4rem .5333rem;
      border-radius: .16rem;
    }
  }
}
</style>